<template>
  <div class="satisfactionList" v-loading="showLoading">
    <satisfactionTable
      v-if="!showLoading"
      :headers="tableHeaders"
      :data="tableData"
      :showPagination="false"
      ref="webchatTableRef">
      <template slot="column">
        <template v-for="(item, index) in tableHeaders">
          <u-table-column
            v-if="item.prop === 'isUse'"
            :resizable="false"
            :prop="item.prop"
            :label="item.label"
            :key="item.label + index"
            :min-width="item.width > 0 ? item.width : ''"
            align="left">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isUse"></el-checkbox>
            </template>
          </u-table-column>
          <u-table-column
            v-if="item.prop === 'name'"
            :resizable="false"
            :prop="item.prop"
            :label="item.label"
            :key="item.label + index"
            :min-width="item.width > 0 ? item.width : ''"
            :show-overflow-tooltip="item.width > 0"
            align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" :maxlength="50" placeholder="请输入名称"></el-input>
            </template>
          </u-table-column>
          <u-table-column
            v-if="item.prop === 'reason'"
            :resizable="false"
            :prop="item.prop"
            :label="item.label"
            :key="item.label + index"
            :min-width="item.width > 0 ? item.width : ''"
            align="left">
            <template slot-scope="scope">
              <el-tag
                :key="index"
                size="small"
                v-for="(tag, index) in scope.row.reason"
                closable
                :disable-transitions="false"
                @close="handleClose(scope.row, tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="tagArr[scope.$index].visible"
                v-model="tagArr[scope.$index].value"
                :ref="'saveTagInput'+ scope.row.key"
                size="small"
                :maxlength="50"
                @keyup.enter.native="handleInputConfirm(scope.row, scope.$index)"
                @blur="handleInputConfirm(scope.row, scope.$index)">
              </el-input>
              <el-button
                v-if="!tagArr[scope.$index].visible && scope.row.reason.length < 6"
                class="button-new-tag" size="mini"
                @click="showInput(scope.row, scope.$index)">
                新增
              </el-button>
            </template>
          </u-table-column>
          <u-table-column
            v-if="item.prop === 'proposalStatus'"
            :prop="item.prop"
            :label="item.label"
            :key="item.label + index"
            :min-width="item.width > 0 ? item.width : ''"
            :show-overflow-tooltip="item.width > 0"
            align="left">
            <template slot-scope="scope">
              <m7Select size="mini"
                class="limitSelect"
                v-model="scope.row.proposalStatus"
                :options="proposalStatusOpt"
                placeholder="请选择">
              </m7Select>
            </template>
          </u-table-column>
          <u-table-column
            v-if="item.prop === 'isDefault'"
            :prop="item.prop"
            :label="item.label"
            :key="item.label + index"
            :min-width="item.width > 0 ? item.width : ''"
            :show-overflow-tooltip="item.width > 0"
            align="left">
            <template slot-scope="scope">
              <el-radio border size="small" v-model="defaultRadio" :label="scope.$index + 1">选中</el-radio>
            </template>
          </u-table-column>
        </template>
      </template>
    </satisfactionTable>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import satisfactionTable from '@/components/configCommon/table.vue'
@Component({
  name: 'satisfactionList',
  components: { satisfactionTable }
})
export default class SatisfactionList extends Vue {
  @Prop() private tableData: any
  @Prop() private defaultIndex: number | undefined
  @Prop() private showLoading: boolean | undefined
  private $message: any

  private tagArr = [
    { visible: false, value: '' },
    { visible: false, value: '' },
    { visible: false, value: '' },
    { visible: false, value: '' },
    { visible: false, value: '' }
  ]

  private tableHeaders = [
    { label: '', prop: 'isUse', width: 38 },
    { label: '名称', prop: 'name', width: 150 },
    { label: '标签', prop: 'reason', width: 650 },
    { label: '备注', prop: 'proposalStatus', width: 90 },
    { label: '默认', prop: 'isDefault', width: 95 }
  ]

  private proposalStatusOpt = [
    { label: '必填', value: 'required' },
    { label: '非必填', value: 'unRequired' },
    { label: '不展示', value: 'notShow' }
  ]

  public defaultRadio: any = 1

  @Watch('defaultIndex')
  public defaultIndexChange () {
    this.defaultRadio = this.defaultIndex
  }

  private handleClose (row: any, tag: any) {
    row.reason.splice(row.reason.indexOf(tag), 1)
  }

  private showInput (row: any, index: number) {
    this.tagArr[index].visible = true
    this.$nextTick(() => {
      const saveInputRef: any = this.$refs['saveTagInput' + row.key][0]
      saveInputRef.$refs.input.focus()
    })
  }

  private handleInputConfirm (row: any, index: number) {
    if (this.tagArr[index].value) {
      row.reason.push(this.tagArr[index].value)
    }
    this.tagArr[index].visible = false
    this.tagArr[index].value = ''
  }
}
</script>
<style lang="stylus">
  .satisfactionList
    min-height 350px
    .el-tag + .el-tag
      margin 0px 10px 5px 0px
    .el-tag--small
      margin 0px 10px 5px 0px
    .button-new-tag
      height 32px
      line-height 30px
      padding-top 0
      padding-bottom 0
    .input-new-tag
      width 90px
      vertical-align bottom
</style>
